import Vue from 'vue'
import Vuex from 'vuex'
// 引入封装好的axios 模块
import http from '@/util/http'

import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [createPersistedState({
    reducer (state) {
      return {
        cityId: state.cityId,
        cityName: state.cityName
      }
    }
  })],
  // 定义全局的状态
  state: {
    // 给个默认值
    cityName: '杭州',
    cityId: '330100',
    cinemaListState: [],
    // 这个是专门管理下面tabbar 的显示和隐藏
    isShowTab: true
  },
  // 这个是专门监视状态的改变
  mutations: {
    // 自己定义的一个函数 有两个参数
    // 第一个参数是state就是上面的状态值 为了方便修改
    // 第二个参数是传来的参数
    cityChangeName (state, cityName) {
      state.cityName = cityName
    },
    cityChangeId (state, cityId) {
      state.cityId = cityId
    },
    cinemaGetList (state, list) {
      state.cinemaListState = list
    },
    clearList (state) {
      state.cinemaListState.length = 0
    },
    showTab (state) {
      state.isShowTab = true
    },
    hiddTab (state) {
      state.isShowTab = false
    }
  },
  // 异步方法
  actions: {
    cinemaGet (store) {
      return http({
        url: `/gateway?cityId=${store.state.cityId}&ticketFlag=1&k=3002104`,
        headers: {
          'X-Host': 'mall.film-ticket.cinema.list'
        }
      }).then((res) => {
        store.commit('cinemaGetList', res.data.data.cinemas)
      })
    }
  }
})
